<template>
    <div>
        <!--查询搜索框-->
        <el-form :inline="true" :model="TypeSearch" class="demo-form-inline">
            <el-form-item label="菜系名称">
                <el-input v-model="TypeSearch.name" placeholder="菜系名称" @input="initTypeTable"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker
                        v-model="TypeSearch.startDate"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
                <el-date-picker
                        v-model="TypeSearch.endDate"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button type="primary" @click="clearSearch">清空查询</el-button>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="addDialogVisible = true">添加</el-button>
        <el-button type="primary" @click="refresh">刷新</el-button>
        <el-dialog
                title="添加菜系信息"
                :visible.sync="addDialogVisible"
                v-if="addDialogVisible"
                @close="handleClose"
                width="30%">
            <!--:model==绑定表单数据-->
            <el-form :model="addform" :rules="addRules" ref="addRuleForm">
                <el-form-item label="菜系名称" label-width="120px" prop="name">
                    <el-input v-model="addform.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜系描述" label-width="120px" prop="remark" >
                    <el-input v-model="addform.remark" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜系状态" label-width="120px" prop="isDeleted">
                    <el-input v-model.number="addform.isDeleted" autocomplete="off"></el-input>
                </el-form-item>


            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addType">确 定</el-button>
            <el-button @click="addDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

        <el-dialog
                title="修改菜系信息"
                :visible.sync="editDialogVisible"
                width="30%">
            <!--:model==绑定表单数据-->
            <el-form :model="editform" :rules="editRules" ref="editRuleForm">
                <el-form-item label="菜系编号" label-width="120px" prop="id">
                    <el-input v-model.number="editform.id" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜系名称" label-width="120px" prop="name">
                    <el-input v-model="editform.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜系描述" label-width="120px" prop="name">
                    <el-input v-model="editform.remark" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜系状态" label-width="120px" prop="name">
                    <el-input v-model="editform.isDeleted" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="updateType">取 消</el-button>
    <el-button type="primary" @click="updateType">确 定</el-button>
  </span>
        </el-dialog>

        <el-table
                :data="TypeTable"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="菜系编号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="菜系名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="菜系描述" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="isDeleted"
                    label="菜系状态"
                    width="120">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        <el-button type="success" size="small" v-if="scope.row.isDeleted == 1">下架</el-button>
                        <el-button type="danger" size="small" v-if="scope.row.isDeleted == 0">正常</el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="gmtCreate"
                    label="创建时间"
                    show-overflow-tooltip
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="gmtModified"
                    label="修改时间"
                    show-overflow-tooltip
                    width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button  @click="updatetype(scope.row)" type="success" size="small">修改菜系信息</el-button>
                    <el-button @click="delType(scope.row.id)"  type="primary" size="small">点击下架</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--<%&#45;&#45;分页组件
        size-change:页面显示条数改变时触发的事件
        current-change: 页面改变时触发的事件
        current-page:当前的页面
        page-sizes:接受一个整数数组  数组元素为展示的选择每页显示个数的选项
        page-size:每页显示的条数
        total:总条数
        &#45;&#45;%>-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "List",
        data(){
            return {
                TypeSearch:{
                    Name: "",
                },
                TypeTable: [],
                addDialogVisible: false,
                //添加表单的数据
                addform: {},
                addRules: {
                    name: [
                        {required: true, message: '菜品名称不能为空', trigger: 'blur'}
                    ],
                },
                //对话框的显示和隐藏  如果为false则隐藏 如果为true则显示
                editDialogVisible:false,
                //修改表单的数据
                editform:{},
                editRules: {
                    name: [
                        {required: true, message: '菜系不能为空', trigger: 'blur'}
                    ],
                },
                currentPage:1,
                //接受一个整数数组  数组元素为展示的选择每页显示个数的选项
                pageSizes:[5,10,15,20],
                //每页显示的条数
                pageSize:5,
                //总条数
                total:0,
            }

        },
        created() {
            this.initTypeTable();
        },
        methods:{
            //刷新
            refresh() {
                this.currentPage = 1;
                this.initTypeTable();
            },

            initTypeTable(){
                //如果传递得参数为json格式 那么必须为post提交
               this.$http.post("/type/findType?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.TypeSearch).then(result=>{
                   console.log(result)
                   this.TypeTable=result.data.data.records
                   this.total=result.data.data.total
               })
            },
            addType(){
                this.$http.post("/type/insertType",this.addform).then(result=>{
                    this.addDialogVisible=false;
                    this.initTypeTable()

                })
            },
            updatetype(row){
                this.editDialogVisible=true;
                this.editform=row;
            },
            updateType(){
              this.$http.post("/type/updateType",this.editform).then(result=>{
                  this.initTypeTable();
                  this.editDialogVisible = false
              })
            },

            delType(row){
              this.$http.post("/type/delType?id="+row).then(result=>{
                  this.initTypeTable();
                  this.currentPage=1;
              })
            },


            //每页显示的条数大小改变时触发的方法
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTypeTable();
            },
            //页码改变时触发的方法
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTypeTable();
            },
            onSearch(){
                this.currentPage = 1;
                this.initTypeTable();
            },
            //清空搜索按钮事件
            clearSearch(){
                this.TypeSearch  = {};
                this.initTypeTable();
            },

            handleClose(){
                Object.assign(this.$data, this.$options.data())
            }
        }
    }
</script>

<style scoped>

</style>